<template>
  <view class="error-403">
    <image v-if="imageExists" class="error-img" src="../../static/images/403.png" mode="widthFix" />
    <text class="error-title">403 无权限访问</text>
    <text class="error-desc">您没有权限访问该页面</text>
    <u-button type="primary" @click="goHome">返回首页</u-button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const imageExists = ref(true)
const goHome = () => {
  uni.reLaunch({ url: '/pages/index/index' })
}
onMounted(() => {
  uni.setNavigationBarTitle({ title: '无权限' })
  // 检查图片是否存在
  uni.getFileInfo({
    filePath: '../../static/images/403.png',
    success: () => { imageExists.value = true },
    fail: () => { imageExists.value = false }
  })
})
</script>

<style scoped>
.error-403 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f8f9fa;
}
.error-img {
  width: 240rpx;
  margin-top: 120rpx;
}
.error-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 32rpx 0 16rpx 0;
  color: #f56c6c;
}
.error-desc {
  font-size: 24rpx;
  color: #888;
  margin-bottom: 48rpx;
}
</style> 